import React, { useEffect, useRef, useState } from 'react'
import './index.less'
import { Column } from '@ant-design/plots';
import { map_datasource, map_datasource_measure_data, map_datasource_warring_data } from '@/services/bigdata';
import AMapLoader from '@amap/amap-jsapi-loader';
import * as echarts from 'echarts';
import calculatePercentage from '@/utils/percentages';
import { bigScreenWebSocketInit, isValidJSON } from '@/utils/bigScreenWebSocket';
import { notification } from 'antd';
// 地图
var map: any = {}
type EChartsOption = echarts.EChartsOption;
const BigDataScreen = () => {
    // 获取URL参数
    const getUrlParam = (name: string) => {
        const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
        const r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return null;
    };
    var token: string | null = getUrlParam('sign');
    const platformId: any = getUrlParam('platformId');
    var map1 = new Map();
    // 正式环境鉴湖驿站id为10的token
    map1.set('10', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsYXJnZV9zY3JlZW4tZjEyd2Q0dDQiLCJhdWQiOiJsaW1hb25pYW8iLCJqdGkiOiJlODJlNjE4NzM4OTRlOTA4ODY4ZjEyd2Q0dDQiLCJwbGF0Zm9ybV9pZCI6IjEwIn0.S6CNDV44XsCPStSyyY7H7rcEdXu3G4_QupMNo5DfUio');
    console.log('map1', map1.get(platformId));
    
    // 存储机构详情
    const [platform_info, set_platform_info] = useState<any>({})
    // 存储慢病类型分布数据
    const [chronic_diseases, set_chronic_diseases] = useState<any>({})
    // 慢病分布柱状图数据
    const [line_data, set_line_data] = useState<any>([])
    // 存储科普教育数据
    const [broadcast, set_broadcast] = useState<any>({})
    // 存储康复评估数据
    const [assessment, set_assessment] = useState<any>({})
    // 存储远程指导数据
    const [guidance, set_guidance] = useState<any>({})
    // 存储健康检测数据
    const [measure_data, set_measure_data] = useState<any>([])
    // 控制健康监测鼠标移入移出
    const [isScrolle, setIsScrolle] = useState(false);
    // 控制呼叫提醒鼠标移入移出
    const [isScrolle1, setIsScrolle1] = useState(false);
    // 存储辖区人员分布和老年人分布数据
    const [data, setData] = useState<any>({})
    // 存储呼叫提醒列表
    const [callNotificationList, setCallNotificationList] = useState<any>([])
    // 存储呼叫提醒数据
    const [callNotificationData, setCallNotificationData] = useState<any>({})


    // 获取数据
    useEffect(() => {
        const getData = async () => {
            if (token || map1.get(platformId)) {
                let res: any = await map_datasource(token?? map1.get(platformId))
                console.log('reshhhhhhhh', res);
                if (res.code == 200) {
                    // 登录长链接
                    let ws = bigScreenWebSocketInit(res.data.platform_info.id);
                    // 监听消息
                    ws.onmessage = async (m: any) => {
                        console.log('big_data', m.data);
                        let result = isValidJSON(m.data);
                        if (result) {
                            if (result.type == 'sickbedWarning') {
                                notification.open({
                                    message: '提醒',
                                    description: <div style={{ width: '209px', height: '43px', background: 'url(../../notification.png) no-repeat center', textAlign: 'center', lineHeight: '43px', color: '#ffffff' }}>{result.msg}</div>,
                                    duration: 3,
                                    // key: count,
                                    placement: 'top',
                                    onClose: () => {

                                    },
                                    className: 'custom-class',
                                });
                                // 更新呼叫提醒数据
                                getCallNotificationData(token);
                            }
                            if (result.type == 'ham' || result.type == 'bloSugar' || result.type == 'temper') {
                                console.log('数据监测', result.type);
                                // 更新健康监测数据
                                setTimeout(() => {
                                    getMeasureData(token);
                                }, 2000)
                            }
                        }
                    }
                    // 存储机构详情
                    set_platform_info(res.data.platform_info)

                    // 存储慢病分布柱状图数据
                    set_line_data(res.data.chronic_diseases.line_data)

                    // 初始化地图
                    // 本地配置 安全密钥（确保这行代码 比 AMapLoader.load 先执行即可，写在别处也行）
                    window._AMapSecurityConfig = { securityJsCode: '1e30c04988226432ed44a265c2dbded0' };
                    AMapLoader.load({
                        key: 'd3256fbe23638421e853944a1975d703', //需要设置您申请的key
                        version: "2.0",
                        plugins: ['AMap.ToolBar', 'AMap.Driving'],
                        AMapUI: {
                            version: "1.1",
                            plugins: [],

                        },
                        Loca: {
                            version: "2.0.0"
                        },
                    }).then((AMap) => {
                        map = new AMap.Map("center_map", {
                            mapStyle: 'amap://styles/4935e013b064f84233ab0b9f2de7d357', //设置地图的显示样式
                            zoom: 14,
                            zooms: [2, 100],
                            center: res.data.platform_info.coordinate.split(','),
                            resizeEnable: true,

                        });
                        var element_ary: any = [];
                        res.data.patient_list.map((item:any, index:number) => {
                            element_ary[index] = document.createElement('div');
                            element_ary[index].style.background = "#3993f8";
                            element_ary[index].style.height = "12px";
                            element_ary[index].style.width = "12px";
                            element_ary[index].style.borderRadius = "12px";
                            // console.log(item.coordinate.split(','));
                            
                            let marker = new AMap.Marker(
                                {
                                    position: item.coordinate.split(','), //经纬度
                                    content: element_ary[index],
                                    title: item.username
                                });
                            map.add(marker);
                        });
                    }).catch(e => {
                        console.log(e);
                    })
                }
                // 获取健康监测数据
                getMeasureData(token?? map1.get(platformId));
                // 获取呼叫提醒数据
                getCallNotificationData(token?? map1.get(platformId));
            }
        }
        getData();
        setTimeout(() => {
            setIsScrolle(true);
            setIsScrolle1(true);
        }, 3000);
    }, [])
    // 获取健康监测数据
    const getMeasureData = async (token: any) => {
        // 获取监测数据
        let res1: any = await map_datasource_measure_data(token)
        console.log('resssss', res1);
        if (res1.code == 200) {
            document.title=res1.data.area_data.platformName;
            // 存储慢病类型分布数据
            set_chronic_diseases(res1.data.chronic_diseases)
            // 存储康复评估数据
            set_assessment(res1.data.assessment)
            // 存储远程指导数据
            set_guidance(res1.data.guidance)
            // 存储健康监测数据
            set_measure_data(res1.data.measure_data)
            // 存储辖区人员和老年人
            setData(res1.data.area_data)

            // 在线评估环状图
            var chartDom = document.getElementById('becovery');
            var myChart = echarts.init(chartDom);
            var option: EChartsOption;
            option = {
                color: ['#F56262', '#2CD2BD', '#66AFFF'],
                series: [
                    {
                        type: 'pie',
                        colorBy: 'data',
                        legendHoverLink: false,
                        itemStyle: {
                            borderRadius: 2,
                            borderColor: '#0c225d',
                            borderWidth: 3,
                        },
                        right: 100,
                        // 占位圆
                        emptyCircleStyle: {
                            borderColor: '#E4F9FB',
                            borderType: [5, 10],
                            borderDashOffset: 5
                        },
                        showEmptyCircle: true,
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: true,
                            position: 'center',
                            fontWeight: 'lighter',
                            fontStyle: "normal",
                            backgroundColor: "transparent",
                            color: "#94AFEA",
                            formatter: `{name|${res1.data.assessment.old_evaluation + res1.data.assessment.old_depressedsds + res1.data.assessment.old_kneewomac}}\n{value|总次数}`,
                            rich: {
                                name: {
                                    fontSize: 24,
                                    color: '#D4F0F9',
                                },
                                value: {
                                    fontSize: 14,
                                    color: '#94AFEA',
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 14,
                                fontWeight: 'normal',
                            }
                        },
                        data: [{
                            name: '抑郁自评评估',
                            value: res1.data.assessment.old_depressedsds ? res1.data.assessment.old_depressedsds : 0,
                        },
                        {
                            name: '能力评估',
                            value: res1.data.assessment.old_evaluation ? res1.data.assessment.old_evaluation : 0,
                        },
                        {
                            name: '膝关节评估',
                            value: res1.data.assessment.old_kneewomac ? res1.data.assessment.old_kneewomac : 0,
                        }],
                    }
                ]
            };
            myChart.setOption(option)

            // 老年人分布环状图
            var chartDom2 = document.getElementById('oldman');
            var myChart2 = echarts.init(chartDom2);
            var option2: EChartsOption;
            option2 = {
                color: ['#37EAB5', '#40ABF9', '#B160EF', '#FAD45F'],
                title: {
                    text: '60岁以上人口总数',
                    bottom: -5,
                    left: '30%',
                    textStyle: {
                        color: '#94AFEA',
                        fontWeight: 'normal',
                        fontSize: 14,
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: '20',
                    top: "middle",
                    itemGap: 20,
                    textStyle: {
                        color: "#94AFEA",
                        lineHeight: 16
                    },
                    itemStyle: {
                        color: "inherit",
                    },
                    itemWidth: 12,
                    itemHeight: 12,
                },
                series: [
                    {
                        type: 'pie',
                        colorBy: 'data',
                        legendHoverLink: false,
                        itemStyle: {
                            borderRadius: 2,
                            borderColor: '#090d49',
                            borderWidth: 3,
                        },
                        right: 100,
                        // 占位圆
                        emptyCircleStyle: {
                            borderColor: '9, 12, 72',
                            borderType: [5, 10],
                            borderDashOffset: 5
                        },
                        showEmptyCircle: true,
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: true,
                            position: 'outside',
                            fontWeight: 'lighter',
                            fontStyle: "normal",
                            backgroundColor: "transparent",
                            color: "#94AFEA",
                            formatter: '{name|{b}}\n{value|{c} 人}',
                            rich: {
                                name: {
                                    fontSize: 14,
                                    color: '#94AFEA',
                                    lineHeight: 20
                                },
                                value: {
                                    fontSize: 14,
                                    color: '#D4F0F9',
                                    lineHeight: 20
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 14,
                                fontWeight: 'normal',
                            }
                        },
                        labelLine: {
                            length: 25,
                            length2: 60,
                            maxSurfaceAngle: 150,
                            lineStyle: {
                                color: '#345B96',
                                join: 'round',
                                width: 1.5
                            }
                        },
                        data: res1.data.area_data.oldmandata
                    }
                ]
            };
            myChart2.setOption(option2)
        }
    }

    // 获取呼叫提醒数据
    const getCallNotificationData = async (token: any) => {
        // 获取呼叫提醒数据
        let res2: any = await map_datasource_warring_data(token);
        console.log('res2', res2);

        if (res2.code == 200) {
            setCallNotificationList(res2.data.list);
            setCallNotificationData(res2.data)
            // 呼叫提醒环状图
            var chartDom1 = document.getElementById('call_number');
            var myChart1 = echarts.init(chartDom1);
            var option1: EChartsOption;
            option1 = {
                color: ['#2CD2BD', '#66AFFF'],
                series: [
                    {
                        type: 'pie',
                        colorBy: 'data',
                        legendHoverLink: false,
                        itemStyle: {
                            borderRadius: 2,
                            borderColor: '#0c225d',
                            borderWidth: 3,
                        },
                        right: 100,
                        // 占位圆
                        emptyCircleStyle: {
                            borderColor: '#E4F9FB',
                            borderType: [5, 10],
                            borderDashOffset: 5
                        },
                        showEmptyCircle: true,
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: true,
                            position: 'center',
                            fontWeight: 'lighter',
                            fontStyle: "normal",
                            backgroundColor: "transparent",
                            color: "#94AFEA",
                            formatter: `{name|${res2.data.total_count}}\n{value|总次数}`,
                            rich: {
                                name: {
                                    fontSize: 24,
                                    color: '#D4F0F9',
                                },
                                value: {
                                    fontSize: 14,
                                    color: '#94AFEA',
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 14,
                                fontWeight: 'normal',
                            }
                        },
                        data: [{
                            name: '当天人数',
                            value: res2.data.today_count ? res2.data.today_count : 0,
                        },
                        {
                            name: '呼叫总人数',
                            value: res2.data.total_count ? res2.data.total_count : 0,
                        },
                        ],
                    }
                ]
            };
            myChart1.setOption(option1)
        }
    }

    // 滚动速度，值越小，滚动越快
    const speed = 50;
    const warper: any = useRef();
    const childDom1: any = useRef();

    // 开始滚动
    useEffect(() => {
        // 多拷贝一层，让它无缝滚动
        // childDom2.current.innerHTML = childDom1.current?.innerHTML;
        let timer: any;
        if (isScrolle) {
            timer = setInterval(
                () => {
                    let table_cro: any = document.getElementById('table_cro')
                    let tableHeight = table_cro.offsetHeight
                    // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
                    if (warper?.current?.scrollTop >= childDom1.current?.scrollHeight - tableHeight) {
                        warper.current.scrollTop = 0;
                        setIsScrolle(false);
                        setTimeout(() => {
                            setIsScrolle(true);

                        }, 3000);
                    } else {
                        warper.current.scrollTop++;
                    }
                }
                ,
                speed
            );
        }
        return () => {
            clearTimeout(timer);
        };
    }, [isScrolle]);

    // 鼠标移入div时暂停滚动 鼠标移出div后继续滚动，设置boolean,true为动，false为停
    const hoverHandler = (flag: boolean) => setIsScrolle(flag);

    // 呼叫提醒滚动
    // 滚动速度
    const speed1 = 50;
    const warper1: any = useRef();
    const childDom2: any = useRef();
    // 开始滚动
    useEffect(() => {
        // 多拷贝一层，让它无缝滚动
        // childDom2.current.innerHTML = childDom1.current?.innerHTML;
        let timer: any;
        if (isScrolle1) {
            timer = setInterval(
                () => {
                    let table_call: any = document.getElementById('table_call')
                    let tableHeight = table_call.offsetHeight
                    // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
                    if (warper1?.current?.scrollTop >= childDom2.current?.scrollHeight - tableHeight) {
                        warper1.current.scrollTop = 0;
                        setIsScrolle1(false);
                        setTimeout(() => {
                            setIsScrolle1(true);

                        }, 3000);
                    } else {
                        warper1.current.scrollTop++;
                    }
                }
                ,
                speed1
            );
        }
        return () => {
            clearTimeout(timer);
        };
    }, [isScrolle1]);
    // 鼠标移入div时暂停滚动 鼠标移出div后继续滚动，设置boolean,true为动，false为停
    const hoverHandler1 = (flag: boolean) => setIsScrolle1(flag);

    // 慢病类型分布柱状图
    const config1 = {
        data: line_data,
        xField: 'month',
        yField: 'value',
        group: true,
        colorField: 'type',
        legend: {
            color: {
                layout: {
                    justifyContent: 'flex-end',
                    alignItems: 'center',
                },
                itemMarker: 'circle',
                itemMarkerFill: (datum: any, index: number, data: any) => {
                    if (datum.label === '糖尿病') {
                        return 'linear-gradient(0deg, #00C196 0%, #00FFC7 100%)';
                    } else if (datum.label === '高血压') {
                        return 'linear-gradient(0deg, #0065EE 0%, #00E1FF 100%)';
                    }
                },
                itemLabelFill: "#94AFEA"
            },
            size: {},
        },
        scale: {
            x: {
                padding: 0.7,
            }
        },
        axis: {
            y: {
                line: true,
                labelFill: "#345B96",
                tickStroke: "#345B96",
                lineStroke: "#345B96",
                labelFontWeight: 400,
                labelFontFamily: "Microsoft YaHei",

            },
            x: {
                line: true,
                tickStroke: "#345B96",
                labelFill: "#4972CC",
                lineStroke: '#345B96',
                labelFontFamily: "Microsoft YaHei",
                labelFontWeight: 400,
                labelSpacing: 10,
            },

        },
        style: {
            // 圆角样式
            radiusTopLeft: 5,
            radiusTopRight: 5,
            radiusBottomRight: 5,
            radiusBottomLeft: 5,
            fill: ({ type }: any) => {
                if (type === '高血压') {
                    return 'linear-gradient(0deg, #0065EE 0%, #00E1FF 100%)';
                } else if (type === '糖尿病') {
                    return 'linear-gradient(0deg, #00C196 0%, #00FFC7 100%)';
                }
            },
        },
    };


    // 防抖函数，防止快速连续调用
    function debounce(func: any, delay: any) {
        let timeout = null
        return () => {
            timeout = setTimeout(() => {
                func()
            }, delay)
        }
    }

    function checkZoom() {
        const width = window.innerWidth;
        const height = window.innerHeight;
        const zoomRatio = width / height;

        if (window.zoomRatio && Math.abs(window.zoomRatio - zoomRatio) > 0.01) {
            // 当检测到缩放比例变化超过1%时，刷新页面
            location.reload();
        }

        window.zoomRatio = zoomRatio;
    }

    // 设置事件监听器
    window.addEventListener('resize', debounce(checkZoom, 500)); // 防抖时间设置为500毫秒

    // 初始化
    checkZoom();

    return (
        <div className='box'>
            {/* 标题 */}
            <div className='header'>
                <div className='title'>
                    <span>{data?.platformName}</span>
                </div>
            </div>
            <div className="content">
                {/* 左侧 */}
                <div className='left'>
                    {/* 辖区人员 */}
                    <div className='left_area'>
                        <div style={{ background: 'url(/xiaqutitle.png) no-repeat', height: '17%', marginTop: '15px', marginLeft: "8px" }}></div>
                        <div style={{ width: '100%', height: "75%", display: 'flex' }}>
                            <div style={{ width: '40%', padding: '0px 0 0px 49px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <div style={{ width: "83%", height: '83%', background: 'url(/xiaqu.png) no-repeat', backgroundSize: '100% 100%', color: '#D4F0F9', textShadow: '1px 3px 9px rgba(12,28,52,0.16)', fontSize: '20px', fontWeight: 500, textAlign: 'center', position: 'relative' }}>
                                    <div style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '20%' }}>{data?.peopleNumber?.totalNumber}</div>
                                </div>
                            </div>
                            <div style={{ width: '60%', display: 'flex', flexDirection: 'column', justifyContent: "space-around", marginLeft: "20px", padding: '20px 0' }}>
                                <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", paddingRight: "30px" }}><div style={{ width: '14px', height: '14px', border: '1px solid #72BDFA', display: 'flex', justifyContent: 'center', alignItems: 'center' }}><div style={{
                                    width: '8px',
                                    height: ' 8px',
                                    background: '#72BDFA',
                                    borderRadius: '50%',
                                }}></div></div><div style={{
                                    width: '35%',
                                    fontFamily: 'Microsoft YaHei',
                                    fontWeight: 400,
                                    fontSize: '14px',
                                    color: '#94AFEA',
                                }}>辖区内男性人口</div><div style={{
                                    width: '20%',
                                    fontFamily: 'D-DIN-PRO',
                                    fontWeight: 500,
                                    fontSize: '20px',
                                    color: '#D4F0F9'
                                }}>{data?.peopleNumber?.manNumber}</div><div style={{
                                    fontFamily: 'D-DIN-PRO',
                                    fontWeight: 500,
                                    fontSize: '20px',
                                    color: '#D4F0F9'
                                }}>{data?.peopleNumber?.manPercentages}</div></div>
                                <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", paddingRight: "30px" }}><div style={{ width: '14px', height: '14px', border: '1px solid #72BDFA', display: 'flex', justifyContent: 'center', alignItems: 'center' }}><div style={{
                                    width: '8px',
                                    height: ' 8px',
                                    background: '#72BDFA',
                                    borderRadius: '50%',
                                }}></div></div><div style={{
                                    width: '35%',
                                    fontFamily: 'Microsoft YaHei',
                                    fontWeight: 400,
                                    fontSize: '14px',
                                    color: '#94AFEA',
                                }}>辖区内女性人口</div><div style={{
                                    width: '20%',
                                    fontFamily: 'D-DIN-PRO',
                                    fontWeight: 500,
                                    fontSize: '20px',
                                    color: '#D4F0F9'
                                }}>{data?.peopleNumber?.womanNumber}</div><div style={{
                                    fontFamily: 'D-DIN-PRO',
                                    fontWeight: 500,
                                    fontSize: '20px',
                                    color: '#D4F0F9'
                                }}>{data?.peopleNumber?.womanPercentages}</div></div>
                            </div>
                        </div>
                    </div>
                    {/* 老年人分布 */}
                    <div className='left_oldman'>
                        <div style={{ background: 'url(/oldmantitle.png) no-repeat', height: "17.2%", marginTop: '15px', marginLeft: "8px" }}></div>
                        <div className='oldman' id='oldman' style={{ height: "73.8%", }}>
                        </div>
                    </div>
                    {/* 慢病类型分布 */}
                    <div className='left_chronic_diseases'>
                        <div style={{ background: 'url(/manbingtitle.png) no-repeat', height: "11.5%", marginTop: '15px', marginLeft: "14px" }}></div>
                        <div className='manbing' style={{ height: '47%' }}>
                            <Column {...config1} />
                        </div>
                        <div className='bottom'>
                            <div className='bottom_tang'>
                                <div className='title'>
                                    <div className='total'>{chronic_diseases.diabetes_total}</div>
                                    <div className='people'>糖尿病人数</div>
                                </div>
                                <div className='sex'>
                                    <div className='nan'><div className='nan_title'>男性</div><div className='nan_number'>{chronic_diseases.diabetes_man}<span className='ren'>人</span></div></div>
                                    <div className='nan'><div className='nan_title'>女性</div><div className='nan_number'>{chronic_diseases.diabetes_woman}<span className='ren'>人</span></div></div>
                                </div>
                            </div>
                            <div className='bottom_tang'>
                                <div className='title'>
                                    <div className='total'>{chronic_diseases.hypertension_total}</div>
                                    <div className='people'>高血压人数</div>
                                </div>
                                <div className='sex'>
                                    <div className='nan'><div className='nan_title'>男性</div><div className='nan_number'>{chronic_diseases.hypertension_man}<span className='ren'>人</span></div></div>
                                    <div className='nan'><div className='nan_title'>女性</div><div className='nan_number'>{chronic_diseases.hypertension_woman}<span className='ren'>人</span></div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 中间 */}
                <div className='center'>
                    {/* 地图 */}
                    <div className='center_map' id='center_map'>
                    </div>
                    {/* 健康监测 */}
                    <div className='center_heathy'>
                        <div style={{ background: 'url(/jiankangtitle.png) no-repeat', height: "11.5%", marginTop: '15px', marginLeft: "14px" }}></div>
                        <div className='center_table'>
                            <table
                                className="tou_list"
                            >
                                <tbody className='int_tou' >
                                    <tr key={"-1"} className="tab_name">
                                        <th className='name'>姓名</th>
                                        <th className='xueya'>血压</th>
                                        <th className='xuetang'>血糖</th>
                                        <th className='xinlv'>心率</th>
                                        <th className='tiwen'>体温</th>
                                        <th className='time'>监测时间</th>
                                    </tr>
                                </tbody>
                            </table>
                            <div id='table_cro' className='table_cro' ref={warper} >
                                <table
                                    className="city_list"
                                >
                                    <tbody className='int_list' ref={childDom1}>
                                        {measure_data.map((item: any, key: any) => {
                                            return (
                                                <tr key={key} className="city_container"
                                                    onMouseOver={() => hoverHandler(false)}
                                                    onMouseLeave={() => hoverHandler(true)}
                                                >
                                                    {/* 姓名 */}
                                                    <td className='name'>{item.username ?? '-'}</td>
                                                    {/* 血压 */}
                                                    <td className='xueya' style={{ color: item.pressure >= 140 || item.diastolic >= 90 ? 'red' : '' }}>{item.pressure != '' && item.pressure != 0 && item.diastolic != '' && item.diastolic != 0 ? item.pressure + '-' + item.diastolic : '-'}</td>
                                                    {/* 血糖 */}
                                                    <td className='xuetang'>{item.blood_sugar != '' ? item.blood_sugar : '-'}</td>
                                                    {/* 心率 */}
                                                    <td className='xinlv'>{item.pulse != '' ? item.pulse : '-'}</td>
                                                    {/* 体温 */}
                                                    <td className='tiwen'>{item.temper != '' ? item.temper : '-'}</td>
                                                    {/* 监测时间 */}
                                                    <td className='time'>{item.measure_time != '' ? item.measure_time : '-'}</td>
                                                </tr>
                                            );
                                        })}
                                    </tbody>
                                    {/* {measure_data.length > 6 ? (<tbody className='int_list' ref={childDom2}></tbody>) : (<div ref={childDom2} style={{ display: 'none' }}></div>)} */}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 右侧 */}
                <div className='right'>
                    {/* 科普教育/呼叫提醒 */}
                    <div className='right_popular_science'>
                        <div style={{ background: 'url(/call.png) no-repeat', height: "10.4%", marginTop: '15px', marginLeft: '14px' }}></div>
                        {/* <div className='data'>
                            <div className='item'>
                                <div className='number'>{broadcast.broadcast_times + broadcast.teaching_times}<span style={{ marginLeft: "5px" }}>次</span></div>
                                <div className='title'>开播总次数</div>
                            </div>
                            <div className='item'>
                                <div className='number'>{(((Number(broadcast.broadcast_duration) + Number(broadcast.teaching_duration))) / 60).toFixed(0)}<span style={{ marginLeft: "5px" }}>分</span></div>
                                <div className='title'>开播总时长</div>
                            </div>
                            <div className='item'>
                                <div className='number'>{broadcast.broadcast_number + broadcast.teaching_number}<span style={{ marginLeft: "5px" }}>人</span></div>
                                <div className='title'>观看总人数</div>
                            </div>
                        </div>
                        <div className='chart'>
                            <div className='number'>
                                <div className='item'>
                                    <div className='item_left' style={{ flex: !broadcast.broadcast_times && !broadcast.teaching_times ? 1 : broadcast.broadcast_times }}></div>
                                    <div className='item_right' style={{ flex: !broadcast.broadcast_times && !broadcast.teaching_times ? 1 : broadcast.teaching_times }}></div>
                                </div>
                                <div className='number_data'>
                                    <div className='number_title' >科普互动次数<span className='number_content' style={{ margin: '0 3px 0 12px' }} >{broadcast.broadcast_times}</span><span className='number_biaoti'>次</span></div>
                                    <div className='number_title'><span className='number_content'>{broadcast.teaching_times}</span><span className='number_biaoti' style={{ margin: "0 12px 0 3px" }}>次</span>专业教培次数</div>
                                </div>
                            </div>
                            <div className='number'>
                                <div className='item'>
                                    <div className='item_left' style={{ flex: !broadcast.broadcast_duration && !broadcast.teaching_duration ? 1 : broadcast.broadcast_duration }}></div>
                                    <div className='item_right' style={{ flex: !broadcast.broadcast_duration && !broadcast.teaching_duration ? 1 : broadcast.teaching_duration }}></div>
                                </div>
                                <div className='number_data'>
                                    <div className='number_title' >科普互动总时长<span className='number_content' style={{ margin: '0 3px 0 12px' }} >{(broadcast.broadcast_duration / 60).toFixed(0)}</span><span className='number_biaoti'>分</span></div>
                                    <div className='number_title'><span className='number_content'>{(broadcast.teaching_duration / 60).toFixed(0)}</span><span className='number_biaoti' style={{ margin: "0 12px 0 3px" }}>分</span>专业教培总时长</div>
                                </div>
                            </div>
                            <div className='number'>
                                <div className='item'>
                                    <div className='item_left' style={{ flex: !broadcast.broadcast_number && !broadcast.teaching_number ? 1 : broadcast.broadcast_number }}></div>
                                    <div className='item_right' style={{ flex: !broadcast.broadcast_number && !broadcast.teaching_number ? 1 : broadcast.teaching_number }}></div>
                                </div>
                                <div className='number_data'>
                                    <div className='number_title' >科普互动观看总人数<span className='number_content' style={{ margin: '0 3px 0 12px' }} >{broadcast.broadcast_number}</span><span className='number_biaoti'>人</span></div>
                                    <div className='number_title'><span className='number_content'>{broadcast.teaching_number}</span><span className='number_biaoti' style={{ margin: "0 12px 0 3px" }}>人</span>专业教培观看总人数</div>
                                </div>
                            </div>
                        </div> */}
                        <div className='call'>
                            <div className='call_number'>
                                <div id='call_number'></div>
                                <div className='call_content'>
                                    <div className='item'><div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#2CD2BD', marginRight: '20px' }}></div><div className='name'>当天人数</div><div className='number'>{callNotificationData?.today_count}<span className='danwei'>人</span></div></div>
                                    <div className='item'><div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#66AFFF', marginRight: '20px' }}></div><div className='name'>呼叫总人数</div><div className='number'>{callNotificationData?.total_count}<span className='danwei'>人</span></div></div>
                                </div>
                            </div>
                            <div className='call_data'>
                                <table className='tou_list'>
                                    <tbody className='int_tou'>
                                        <tr key={"-1"} className='tab_name'>
                                            <th className='name'>姓名</th>
                                            <th className='time'>呼叫时间</th>
                                        </tr>
                                    </tbody>
                                </table>
                                <div id='table_call' className='table_call' ref={warper1}>
                                    <table className='city_list'>
                                        <tbody className='int_list' ref={childDom2}>
                                            {callNotificationList.map((item: any, key: number) => {
                                                return (
                                                    <tr key={key} className='city_container' onMouseOver={() => hoverHandler1(false)}
                                                        onMouseLeave={() => hoverHandler1(true)}>
                                                        {/* 姓名 */}
                                                        <td className='name'>{item.patient_name ?? '-'}</td>
                                                        {/* 呼叫时间 */}
                                                        <td className='time'>{item.create_time != '' ? item.create_time : '-'}</td>
                                                    </tr>
                                                );
                                            })}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 康复评估 */}
                    <div className='right_becovery'>
                        <div style={{ background: 'url(/shequkf.png) no-repeat', height: "8.4%", marginTop: '15px', marginLeft: '8px' }}></div>
                        <div className='center_becovery'>
                            <div className='item' style={{}}>
                                <div style={{ background: 'url(/family.png) no-repeat', height: '33.2%' }}></div>
                                <div className='data'>
                                    <div className='logo'>
                                        <div style={{ width: '100%', height: '100%' }}><img src="/chuang.png" alt="" style={{ width: "100%", height: '100%' }} /></div>
                                    </div>
                                    <div className='content'>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", marginBottom: '10px' }} ><div className='title'>在建床位</div><div className='number'>{data.family_bed?.in_progress}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: '#D4F0F9',
                                        }}>张</span></div></div>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center" }}><div className='title'>累计建床</div><div className='number'>{data.family_bed?.total}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: '#D4F0F9',
                                        }}>张</span></div></div>
                                    </div>
                                </div>
                            </div>
                            <div className='item' style={{
                                width: '46.3%',
                                height: '47%'
                            }}>
                                <div style={{ background: 'url(/remoteguide.png) no-repeat', height: '33.2%' }}></div>
                                <div className='data'>
                                    <div className='logo'>
                                        <div style={{ width: '100%', height: '100%' }}><img src="/tu3.png" alt="" style={{ width: "100%", height: '100%' }} /></div>
                                    </div>
                                    <div className='content'>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", marginBottom: '10px' }} ><div className='title'>指导次数</div><div className='number'>{guidance.patient_guidance_count}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: '#D4F0F9',
                                        }}>次</span></div></div>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center" }}><div className='title'>指导时长</div><div className='number'>{(guidance.patient_guidance_duration / 60).toFixed(0)}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: '#D4F0F9',
                                        }}>分</span></div></div>
                                    </div>
                                </div>
                            </div>
                            <div className='item' style={{ marginTop: '15px' }}>
                                <div style={{ background: 'url(/shequkangfuxunlian.png) no-repeat', height: '33.2%' }}></div>
                                <div className='data'>
                                    <div className='logo'>
                                        <div style={{ width: '100%', height: '100%' }}><img src="/tu1.png" alt="" style={{ width: "100%", height: '100%' }} /></div>
                                    </div>
                                    <div className='content'>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", marginBottom: '10px' }} ><div className='title'>训练次数</div><div className='number'>{assessment.doctor_assessment_count}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: ' #D4F0F9',
                                        }}>次</span></div></div>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center" }}><div className='title'>训练时长</div><div className='number'>{(assessment.doctor_assessment_duration / 60).toFixed(0)}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: ' #D4F0F9',
                                        }}>分</span></div></div>
                                    </div>
                                </div>
                            </div>
                            <div className='item' style={{ marginTop: '15px' }}>
                                <div style={{ background: 'url(/jujiaxunlian.png) no-repeat', height: '33.2%' }}></div>
                                <div className='data'>
                                    <div className='logo'>
                                        <div style={{ width: '100%', height: '100%' }}><img src="/tu2.png" alt="" style={{ width: "100%", height: '100%' }} /></div>
                                    </div>
                                    <div className='content'>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", marginBottom: '10px' }} ><div className='title'>训练次数</div><div className='number'>{assessment.self_assessment_count}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: '#D4F0F9',
                                        }}>次</span></div></div>
                                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center" }}><div className='title'>训练时长</div><div className='number'>{(assessment.self_assessment_duration / 60).toFixed(0)}<span style={{
                                            fontFamily: 'Adobe Heiti Std',
                                            fontWeight: 'normal',
                                            fontSize: '12px',
                                            color: '#D4F0F9',
                                        }}>分</span></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='online_becovery' style={{ height: '33.8%' }}>
                            <div style={{ background: 'url(/onlinetitle.png) no-repeat', height: '20.5%' }}></div>
                            <div style={{ height: "79.5%", width: "100%", display: "flex", justifyContent: "space-around" }}>
                                <div className='becovery' id='becovery' style={{ height: "100%", width: "40%" }}>
                                </div>
                                <div className='becovery_right'>
                                    <div className='item'>
                                        <div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#F56262', marginRight: '20px' }}></div><div className='name'>抑郁自评评估</div><div className='number'>{assessment.old_depressedsds}<span className='danwei'>次</span></div><div className='baifenbi'>{calculatePercentage(assessment.old_evaluation, assessment.old_depressedsds, assessment.old_kneewomac).num2}</div>
                                    </div>
                                    <div className='item'>
                                        <div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#2CD2BD', marginRight: '20px' }}></div><div className='name'>能力评估</div><div className='number'>{assessment.old_evaluation}<span className='danwei'>次</span></div><div className='baifenbi'>{calculatePercentage(assessment.old_evaluation, assessment.old_depressedsds, assessment.old_kneewomac).num1}</div>
                                    </div>
                                    <div className='item'>
                                        <div style={{ width: '12px', height: '12px', borderRadius: "50%", backgroundColor: '#66AFFF', marginRight: '20px' }}></div><div className='name'>膝关节评估</div><div className='number'>{assessment.old_kneewomac}<span className='danwei'>次</span></div><div className='baifenbi'>{calculatePercentage(assessment.old_evaluation, assessment.old_depressedsds, assessment.old_kneewomac).num3}</div>
                                    </div>
                                </div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div >

    )
}
export default BigDataScreen